<template>
  <div class="search">
    <el-container>
      <el-aside width="200px">
        <el-menu default-active="1" style="text-align:center;">
          <el-menu-item
            v-for="wItem in wikiMes"
            :key="wItem.sId"
            :index="wItem.wId.toString()"
            @click="toClick(wItem.wLink)"
            class="seach_menu"
          >
            <img :src="wItem.wIcon" alt="">
            <!-- <i class="iconfont" :class="wItem.icon"></i> -->
            <span slot="title">{{ wItem.wName }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <iframe
          :src="currentLink"
          style="width:100%;height:100%;"
          scrolling="auto"
          frameborder="0"
          class="trend-container2"
          id="iframe"
        ></iframe>

        </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'Search',
  data () {
    return {
      currentLink:"",
      wikiMes: []
    }
  },
  created () {
    this.getWikiMes();
  },
  methods: {
    getWikiMes(){
      this.$axios.getWikiBytId(1).then(res => {
        this.wikiMes = res.data
        this.currentLink = res.data[0].wLink
        console.log(res.data)
      })
    },
    toClick (link) {
      this.currentLink = link;
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
<style scoped>
.tac {
  background-color: #000;
  display: flex;
  margin-top: 20px;
}
.el-main {
  padding: 0;
}
.seach_menu>img {
  width: 20px;
  height: 20px;
}
.search_col {
  height: 400px;
  overflow: auto;
}
.search_iframe {
  width: 100%;
}
.search_iframe > iframe {
  width: 100%;
  height: 100%;
}
</style>
